<template>
  <div class="system-table-container layout-pd">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-table-search">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-input class="mt10"  size="default" v-model="state.tableData.param.title" placeholder="请输入服务名称" clearable @keyup.enter="handleQuery" />
            <el-button size="default" class="mt10" type="primary" @click="handleQuery()" :icon="'ele-Search'"> 搜索 </el-button>
            <el-button size="default" class="mt10" type="info" @click="resetQuery()" :icon="'ele-Refresh'"> 重置 </el-button>
          </el-col>
          <el-col :span="24">
            <el-button size="default"
                       class="mt10"
                       type="success"
                       :icon="'ele-Plus'"
                       @click="handleAdd"
                       v-auths="['system:initializePrefixGoodsService:add']">新增</el-button>
            <el-button class="mt10" size="default" type="primary" plain icon="ele-Edit" :disabled="single" @click="handleUpdate()" v-auths="['system:initializePrefixGoodsService:edit']">修改</el-button>
            <el-button size="default"
                       class="mt10"
                       type="danger"
                       icon="ele-Delete"
                       :disabled="multiple"
                       @click="handleDelete()"
                       v-auths="['system:initializePrefixGoodsService:remove']">删除</el-button>
            <el-button class="mt10" size="default" type="warning" plain icon="ele-Download" @click="handleExport" v-auths="['system:initializePrefixGoodsService:export']">导出</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table border v-loading="state.tableData.loading" :data="state.tableData.data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column show-overflow-tooltip label="服务名称" align="center" prop="title" min-width="180px"/>
        <el-table-column show-overflow-tooltip label="服务说明" align="center" prop="content" min-width="180px"/>
        <el-table-column show-overflow-tooltip label="排序" align="center" prop="sort" min-width="180px">
          <template #header="{ column }">
              <el-tooltip class="item" content="序号越大，排序越靠前" placement="top">
                <div style="display: flex; justify-content:center">
                  <span>{{ column.label }}</span>
                  <el-button link icon="ele-Warning"></el-button>
                </div>
              </el-tooltip>
          </template>
          <template #default="scope">
              <el-popover :visible="scope.row.popover"  placement="right" :width="200" trigger="click" title="修改排序">
                <template #reference>
                  <span>{{ scope.row.sort }}
                    <el-button link type="primary" icon="ele-Edit" @click="editSort(scope.row, scope.$index)" v-auths="['system:initializePrefixGoodsService:edit']"></el-button>
                  </span>
                </template>

                <div >
                  <p >
                    <el-input v-model="state.sort"></el-input>
                  </p>
                  <div class="el-popconfirm__action">
                    <el-button size="default" type="default" @click="cancel">取消</el-button>
                    <el-button size="default" type="primary" @click="sortChange">确定</el-button>
                  </div>
                </div>
              </el-popover>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="状态" align="center" prop="status" min-width="180px">
          <template #default="scope">
            <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.status"
                @change="editChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="商户ID" align="center" prop="merchantId" min-width="180px"/>
        <el-table-column show-overflow-tooltip label="应用ID" align="center" prop="AppID" min-width="180px"/>
        <el-table-column show-overflow-tooltip label="创建时间" align="center" prop="createdTime" min-width="180px"/>
        <el-table-column show-overflow-tooltip label="修改时间" align="center" prop="updatedTime" min-width="180px"/>
        <el-table-column label="操作" min-width="100px" fixed="right" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="ele-Edit" @click="handleUpdate(scope.row)" v-auths="['system:initializePrefixGoodsService:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="ele-Delete" @click="handleDelete(scope.row)" v-auths="['system:initializePrefixGoodsService:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty  :image-size="200"/>
        </template>
      </el-table>

      <el-pagination @size-change="onHandleSizeChange"
                     @current-change="onHandleCurrentChange"
                     class="mt15 paginationFlex"
                     :pager-count="5"
                     :page-sizes="[10, 20, 30]"
                     v-model:current-page="state.tableData.param.pageNum"
                     background
                     v-model:page-size="state.tableData.param.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="state.tableData.total">
      </el-pagination>
    </el-card>
    <UserDialog ref="userDialogRef" @refresh="getList()" />
  </div>
</template>

<script setup name="InitializePrefixGoodsService1" lang="ts">
import {reactive, onMounted, ref, defineAsyncComponent} from "vue";
import { listInitializePrefixGoodsService,delInitializePrefixGoodsService } from "@/leadMall/api/initializePrefixGoodsService";
import {  ElMessage, ElMessageBox, ElTable } from "element-plus";
import { download } from "@/api/config/utils/tool";
import { InitializePrefixGoodsServiceVO } from '@/leadMall/api/initializePrefixGoodsService/types';
// 引入组件
const UserDialog = defineAsyncComponent(() => import("@/leadMall/goods/initializePrefixGoodsService/servicePublish.vue"));

const multipleSelection = ref<InitializePrefixGoodsServiceVO[]>([])
const single = ref(true);
const multiple = ref(true);
const userDialogRef = ref();
const state = reactive({
  tableData: {
    data: [] as any,
    total: 0 as any,
    loading: false,
    dateRange: [] as any,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
  chageData:{} as any,
  chageIndex:undefined as any,
  sort:""
});

const editChange=(row)=>{
  console.log(row);
}
const editSort=(row,index)=>{
  state.chageData = row;
  state.sort = row.sort;
  state.chageIndex = index;
  state.tableData.data[state.chageIndex].popover = true;
  console.log(row,index);
}
const sortChange=()=>{
  console.log( state.chageData,state.chageIndex);
}
/** 查询【请填写功能名称】列表 */
const getList = () => {
  state.tableData.loading = true;
  listInitializePrefixGoodsService(state.tableData.param).then((res)=>{
    if (res.code === 200) {
      let { rows, total } = res;
      rows.forEach(item => {
        // let it as InitializePrefixGoodsServiceVO;
        // it = item
        item['popover'] = false;
      });
      state.tableData.data = rows;
      state.tableData.total = total;
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(() => {
    ElMessage.error('获取数据失败');
  }).finally(() => {
    state.tableData.loading = false;
  });
}
/** 取消按钮 */
const cancel = () => {
  state.tableData.data[state.chageIndex].popover = false;
  state.chageIndex = null;
  state.chageData = null;
}
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getList();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  state.tableData.param = {
    pageNum: 1,
    pageSize: 10
  };
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: InitializePrefixGoodsServiceVO[]) => {
  multipleSelection.value = selection
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

const handleAdd = () => {
  userDialogRef.value.openDialog("add", {});
};
// 打开修改用户弹窗
const handleUpdate = ( row: RowUserType) => {
  userDialogRef.value.openDialog("edit", row);
};

/** 删除按钮操作 */
const handleDelete = async (row?: InitializePrefixGoodsServiceVO) => {
  const _ids = row?.id || multipleSelection.value.map((item) => item.id).join(',');
  if (_ids == "") {
    ElMessage.error("请选择要删除的数据");
    return;
  }
  state.tableData.loading= true
  ElMessageBox.confirm('是否确认删除APP信息编号为"' + _ids + '"的数据项？',
      '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
    delInitializePrefixGoodsService(_ids);
    ElMessage.success("删除成功");
  }).catch(() => {
    ElMessage.info('已取消删除');
  }).finally(() => {
    getList();
    state.tableData.loading= false
  });
}

/** 导出按钮操作 */
const handleExport = () => {
  download('system/initializePrefixGoodsService/export',
      { ...state.tableData.param },
      `initializePrefixGoodsService_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>
